<template>
  <div>
    <el-card>
      <a-table :columns="columns" :data-source="data">
        <span slot="action">
          <a href="#">查看</a>
          <a-divider type="vertical" />
          <a href="#">删除</a>
        </span>
        <p slot="expandedRowRender" slot-scope="data" style="margin: 0">
          <span v-html="data.jobDescribe" />
        </p>
      </a-table>
    </el-card>
    <el-button type="text" @click="dialogFormVisible = true">新建职位</el-button>
    <el-dialog title="新建职位" :visible.sync="dialogFormVisible">
      <el-form :model="employeeForm">
        <el-form-item label="职位名称" :label-width="formLabelWidth">
          <el-input v-model="employeeForm.jobName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学历" :label-width="formLabelWidth">
          <el-select v-model="employeeForm.jobAcademic" placeholder="请选择活动区域">
            <el-option label="大专" value="大专" />
            <el-option label="本科" value="本科" />
            <el-option label="研究生" value="研究生" />
            <el-option label="博士" value="博士" />
          </el-select>
        </el-form-item>
        <el-form-item label="员工薪水" :label-width="formLabelWidth">
          <el-input v-model="employeeForm.jobSalary" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工福利">
          <el-select v-model="employeeForm.jobWelfare" placeholder="请选择活动区域">
            <el-option label="五险一金" value="五险一金" />
            <el-option label="年终奖" value="年终奖" />
            <el-option label="免费班车" value="免费班车" />
            <el-option label="带薪年假" value="带薪年假" />
            <el-option label="股票期权" value="股票期权" />
            <el-option label="员工旅游" value="员工旅游" />
          </el-select>
        </el-form-item>
        <el-form-item label="工作需要">
          <el-input v-model="employeeForm.jobNeed" autocomplete="off" />
        </el-form-item>
        <el-form-item label="职位描述">
          <mavon-editor ref="md" v-model="content" @change="change" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>

const columns = [
  { title: '职位编号', dataIndex: 'jobId', key: 'jobId' },
  { title: '职位名称', dataIndex: 'jobName', key: 'jobName' },
  { title: '学历要求', dataIndex: 'jobAcademic', key: 'jobAcademic' },
  { title: '薪水', dataIndex: 'jobSalary', key: 'jobSalary' },
  { title: '工作福利', dataIndex: 'jobWelfare', key: 'jobWelfare' },
  { title: '职位要求', dataIndex: 'jobNeed', key: 'jobNeed' },
  { title: 'Action', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' }}
]

export default {
  data() {
    return {
      data: '',
      columns,
      content: '',
      employeeForm: {
        jobName: '',
        jobAcademic: '',
        jobSalary: '',
        companyId: 1,
        jobWelfare: '',
        jobDescribe: '',
        jobNeed: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '120px',
      timer: null
    }
  },
  created() {
    const _this = this
    this.$http.get('/job/findAllJobByCompanyId/' + 2).then(function(resp) {
      console.log(resp)
      _this.data = resp.data
    })
  },
  methods: {
    onSubmit() {
      console.log(this.employeeForm)
      this.$http.post('/job/addJobInfo', this.employeeForm).then(function(resp) {
        console.log(resp)
      })
      this.$router.go(0)
      this.dialogFormVisible = false
    },
    change: function(value, render) {
      this.employeeForm.jobDescribe = render
    }
  }
}
</script>

<style scoped lang="scss">
  .box-card {
    width: 100%;
  }
</style>
